<html>
<head>
  <script type="text/javascript" src="js/d3/d3.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="js/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery/jquery-ui.min.js"></script>

  <script type="text/javascript" src="js/customize/base/customize.js"></script>
  <script type="text/javascript" src="js/customize/draw/drawProcess.js"></script>
  <script type="text/javascript" src="js/customize/draw/drawPicture.js"></script>
  <script type="text/javascript" src="js/customize/draw/drawBasePicture.js"></script>
  <script type="text/javascript" src="js/customize/base/stringBuffer.js"></script>


  <script src="subProcess.js"></script>
  <script src="subProcess2.js"></script>
  <script src="subProcess3.js"></script>

  <script src="data.js"></script> 
  <script src="jsonData2.js"></script>
  <script src="jsondata3.js"></script>

  <script src="pathData.js"></script>
  <script src="pathData2.js"></script>
  <script src="pathData3.js"></script>
  <style>  
	#popupcontent{   
	  position: absolute;  
	  visibility: hidden;     
	  overflow: hidden;     
	  border:1px solid #CCC;     
	  background-color:#F9F9F9;     
	  border:1px solid #333;     
	  padding:5px;}  
	</style>  
	<script>  
var baseText = null;   
function showPopup(processId){
	var datas;
	if (processId == 39034916) {
		datas = jsonData;
	} else if (processId == 39034932) {
		datas = jsonData2;
	} else if (processId == 39036566) {
		datas = jsonData3;
	};
    var popUp = document.getElementById("popupcontent");     
    popUp.style.top = "100px";     
    popUp.style.left = "200px";     
    popUp.style.width = datas.data.width + 50;     
    popUp.style.height = datas.data.height;      
    if (baseText == null) baseText = popUp.innerHTML;    
    popUp.innerHTML = baseText + "<div id=\"statusbar\"><input type=\"button\" value=\"Close window\" onClick=\"hidePopup();\"></div>";     
    var sbar = document.getElementById("statusbar");     
    // sbar.style.marginTop = (0) + "0px";    
    popUp.style.visibility = "visible"; 
    drawProcess(processId, datas,"statusbar");
} 

function hidePopup(){     
    var popUp = document.getElementById("popupcontent");     
    popUp.style.visibility = "hidden";  
}  
</script> 
</head>
<body id="bodys">
<script type="text/javascript">
	// var w=5000;
	// var h=5000;
	// var dataset = [5,10,15,20,25];
	// var svg = d3.select("body")
	// 			.append("svg")
	// 			.attr("width",w)
	// 			.attr("height",h);
	// var circles = svg.selectAll("circle").data(dataset).enter().append("circle");
	// circles.attr("cx",function(d,i){
	// 	return (i*50)+25;
	// }).attr("cy",50).attr("r",function(d){
	// 	return d;
	// });

	// drawCircle(circles,50,50,50);

	drawProcess(39034916,jsonData,"bodys");
	// var nodes = [
	//     {title: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut"}
	// ]

	// var w = 960, h = 800;

	// var svg = d3.select("body").append("svg")
	//     .attr("width", w)
	//     .attr("height", h);

	// var vSeparation = 13, textX=200, textY=100, maxLength=20

	// var textHolder = svg.selectAll("text")
	//     .data(nodes)
	//     .enter().append("text")
	//     .attr("x",textX)
	//     .attr("y",textY)
	//     .attr("text-anchor", "middle")
	//     .each(function (d) {
	//         var lines = wordwrap(d.title, maxLength)

	//         for (var i = 0; i < lines.length; i++) {
	//             d3.select(this).append("tspan").attr("dy",vSeparation).attr("x",textX).text(lines[i])
	//         }
	//     });


	// function wordwrap(text, max) {
	//     var regex = new RegExp(".{0,"+max+"}(?:\\s|$)","g");
	//     var lines = []

	//     var line
	//     while ((line = regex.exec(text))!="") {
	//         lines.push(line);
	//     } 
	//     for (var i = 0; i < lines.length; i++) {
 //            console.log(lines[i]);
 //        }
	//     return lines
	// }
</script>
<!-- <svg width="5000" height="5000">

</svg> -->
<div id="popupcontent"></div>  

  
<p><a href="#" ondblclick="showPopup(39036566);" title="1234556">onclick</a></p> 

</body>
</html>
